// 变量定义
$primary-color: #38adff;
$text-primary: #333333;
$text-secondary: #666666;
$text-light: #999999;
$background-color: #ffffff;
$background-gray: #f5f5f5;
$border-color: #eeeeee;
$danger-color: #ff0000;
$radius-small: 12rpx;
$radius-medium: 16rpx;
$radius-large: 32rpx;
$spacing-xs: 8rpx;
$spacing-sm: 20rpx;
$spacing-md: 30rpx;
$spacing-lg: 30rpx;
$spacing-xl: 120rpx;
$font-size-xs: 24rpx;
$font-size-sm: 28rpx;
$font-size-md: 32rpx;
$font-size-lg: 48rpx;
$line-height-md: 56rpx;
$line-height-lg: 68rpx;
$icon-size: 44rpx;
$header-height: 88rpx;
$bottom-nav-height: 120rpx;
$avatar-size: 70rpx;

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 容器样式 */
.container {
    width: 100%;
    min-height: 100vh;
    background-color: $background-color;
}

/* 顶部导航栏样式 */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: $header-height;
    background-color: $background-color;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 $spacing-md;
    z-index: 1000;
    border-bottom: 1px solid $border-color;

    .back-btn,
    .search-btn {
        width: $icon-size;
        height: $icon-size;
        display: flex;
        align-items: center;
        justify-content: center;

        image {
            width: $icon-size;
            height: $icon-size;
        }
    }
}

/* 标题样式 */
.title {
    margin: 0 $spacing-md $spacing-md $spacing-md;
    font-size: $font-size-lg;
    font-weight: bold;
    color: $text-primary;
    line-height: $line-height-lg;
}

/* 目录样式 */
.toc {
    margin: 0 $spacing-md $spacing-md $spacing-md;
}

.toc-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: $spacing-sm;
    background-color: $background-gray;
    border-radius: $radius-small;

    .toc-text {
        font-size: $font-size-sm;
        color: $text-secondary;
    }

    .toc-icon {
        width: 24rpx;
        height: 24rpx;
    }
}

.toc-content {
    margin-top: $spacing-sm;
    padding: $spacing-sm;
    background-color: $background-gray;
    border-radius: $radius-small;

    .toc-link {
        font-size: $font-size-sm;
        color: $text-primary;
        padding: 10rpx 0;
        border-bottom: 1px solid $border-color;

        &:last-child {
            border-bottom: none;
        }
    }
}

/* 用户信息样式 */
.user {
    margin: 0 $spacing-md $spacing-md $spacing-md;
    display: flex;
    align-items: center;

    .user-header {
        width: $avatar-size;
        height: $avatar-size;
        border-radius: 50%;
    }

    .user-info {
        margin-left: $spacing-sm;
        flex: 1;

        .user-name {
            font-size: $font-size-md;
            font-weight: bold;
            color: $text-primary;
        }

        .user-desc {
            margin-top: $spacing-xs;
            padding: 4rpx 16rpx;
            background-color: rgba($danger-color, 0.1);
            color: $danger-color;
            font-size: $font-size-xs;
            border-radius: $radius-medium;
            display: inline-block;
        }
    }

    .attention {
        padding: 6rpx $spacing-lg;
        border: 1rpx solid $text-light;
        background-color: $background-color;
        color: $text-primary;
        font-size: $font-size-sm;
        border-radius: $radius-large;
    }
}

/* 文章内容样式 */
.article-content {
    margin: 0 $spacing-md $spacing-xl $spacing-md;
    font-size: $font-size-md;
    line-height: $line-height-md;
    color: $text-primary;

    rich-text {
        width: 100%;
    }
}

/* 底部导航栏样式 */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: $bottom-nav-height;
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-top: 1px solid $border-color;
    z-index: 1000;
    background-color: $background-color;
    padding-bottom: env(safe-area-inset-bottom, 0);

    .nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: $text-secondary;

        image {
            width: $icon-size;
            height: $icon-size;
            margin-bottom: $spacing-xs;
        }

        .badge {
            font-size: $font-size-xs;
            color: $text-secondary;
        }
    }
}